<template>
	<view class="wui-skeleton" :style="[
			{
				top: skeleton.top + top + 'px',
				left: skeleton.left + 'px',
				width: skeleton.width + 'px',
				height: skeleton.height + 'px'
			},
			skeletonZindexComputed
		]" v-if="loading">
		<!-- #ifdef H5 -->
		<view class="wui-skeleton-square" :style="[
				{
					top: item.top - skeleton.top + 'px',
					left: item.left - skeleton.left + 'px',
					width: item.width + 'px',
					height: item.height + 'px'
				}
			]" :class="[animation ? 'shine' : '']" v-for="(item, index) in square" :key="index"></view>
		<view class="wui-skeleton-circular" :style="[
				{
					top: item.top - skeleton.top + 'px',
					left: item.left - skeleton.left + 'px',
					width: item.width + 'px',
					height: item.height + 'px'
				}
			]" :class="[animation ? 'shine' : '']" v-for="(item, index) in circular" :key="index"></view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="wui-skeleton-square" :style="[
				{
					top: item.top - skeleton.top - top + 'px',
					left: item.left - skeleton.left + 'px',
					width: item.width + 'px',
					height: item.height + 'px'
				}
			]" :class="[animation ? 'shine' : '']" v-for="(item, index) in square" :key="index"></view>
		<view class="wui-skeleton-circular" :style="[
				{
					top: item.top - skeleton.top - top + 'px',
					left: item.left - skeleton.left + 'px',
					width: item.width + 'px',
					height: item.height + 'px'
				}
			]" :class="[animation ? 'shine' : '']" v-for="(item, index) in circular" :key="index"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: 'w-skeleton',
		props: {
			loading: {
				type: Boolean,
				default: false
			},
			animation: {
				type: Boolean,
				default: true
			},
			elColor: {
				type: String,
				default: '#e5e5e5'
			},
			skeletonClass: {
				type: String,
				default: 'w-skeleton'
			},
			squareClass: {
				type: String,
				default: 'w-skeleton-square'
			},
			circularClass: {
				type: String,
				default: 'w-skeleton-circular'
			},

		},
		data() {
			return {
				top: 0,
				skeleton: {},
				circular: [], //圆形
				square: [] //方形
			};
		},
		computed: {
			skeletonZindexComputed() {
				return {
					zIndex: this.uniWuiConfig.zIndex.skeleton
				}
			}
		},
		mounted() {
			// #ifdef H5
			this.top = 44;
			// #endif
			// #ifdef MP-WEIXIN
			const custom = wx.getMenuButtonBoundingClientRect();
			const systemInfo = this.systemInfo;
			this.top = custom.bottom + custom.top - systemInfo.statusBarHeight;
			// #endif
			this.selecterQueryInfo();
		},
		methods: {
			selecterQueryInfo() {
				this.createSelectorQuery('.' + this.skeletonClass, res => {
					this.skeleton = res[0][0];
					// 渲染圆形
					this.selecterQueryCircular();
					// 渲染方形
					this.selecterQuerySquare();
				});
			},
			selecterQueryCircular() {
				this.createSelectorQuery('.' + this.circularClass, res => {
					if (res && res.length) this.circular = res[0];
				});
			},
			selecterQuerySquare() {
				this.createSelectorQuery('.' + this.squareClass, res => {
					if (res && res.length) this.square = res[0];
				});
			},
			createSelectorQuery(dom, cb) {
				uni.createSelectorQuery()
					.selectAll(dom)
					.boundingClientRect()
					.exec(res => {
						cb(res);
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@keyframes shine {
		0% {
			left: -100%;
		}

		50% {
			left: 0;
		}

		100% {
			left: 100%;
		}
	}

	.wui-skeleton {
		position: absolute;
		overflow: hidden;

		.shine::before {
			content: '';
			animation: shine 1.5s linear infinite;
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
			background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
		}

		.wui-skeleton-square {
			position: absolute;
			background-color: #e5e5e5;
			overflow: hidden;
		}

		.wui-skeleton-circular {
			position: absolute;
			border-radius: 50%;
			overflow: hidden;
			background-color: #e5e5e5;
		}
	}
</style>
